<template>
  <div class="invite-main">
    <!-- 页头 -->
    <PageHeader :lang="lang"></PageHeader>
    <!-- banner -->
    <div class="banner banner-big" :style="{'background-image':'url('+ textData.Banner +')'}">
      <div class="title">
        <h3>{{textData && textData.BannerText1}}</h3>
        <h4>{{textData && textData.BannerText2}}</h4>
      </div>
    </div>
    <div class="banner banner-small" :style="{'background-image':'url('+ textData.Banner800 +')'}">
      <div class="title">
        <h3>{{textData && textData.BannerText1}}</h3>
        <h4>{{textData && textData.BannerText2}}</h4>
      </div>
    </div>
    <div class="content">
      <!-- 排名 -->
      <div class="sort" v-show="textData && textData.Status">
        <ul class="list">
          <li class="item" v-for="(item,index) in noList">
              <img :src="noImgs[index]">
              <div class="text">
                <span class="name">{{item.UserName}}</span>
                <span class="money">{{item.Amount}}<font class="unit">{{item.Unit}}</font></span>
              </div>
          </li>
        </ul>
      </div>
      <!-- 分享 -->
      <div class="style">
        <div class="list" v-if="mixUserInfo.userName">
          <div class="item">
            <h3 class="title" v-text="lang && lang['Method 1']"></h3>
            <h3 v-text="lang && lang['Scan share link on WeChat']"></h3>
            <div id="qrcode"></div>
          </div>
          <div class="item">
            <h3 class="title" v-text="lang && lang['Method 2']"></h3>
            <h3 v-text="lang && lang['Copy link to invite friends']"></h3>
            <div class="value">
              <input type="text" :value="copyContent('link')" id="link">
              <span class="input link">{{shareInfo && shareInfo.url}}</span>
            </div>
            <div class="value">
              <span class="btn" @click="copy('link')" v-text="lang && lang['Copy Link']"></span>
            </div>
          </div>
          <div class="item">
            <h3 class="title" v-text="lang && lang['Method 3']"></h3>
            <h3 v-text="lang && lang['Your referral code']" class="long"></h3>
            <div class="value">
              <input type="text" :value="copyContent('code')" id="code">
              <span class="input code">{{shareInfo && shareInfo.code}}</span>
            </div>
            <div class="value">
              <span class="btn" @click="copy('code')" v-text="lang && lang['Copy Referral Code']"></span>
            </div>
          </div>
        </div>
        <div class="login" v-else>
          <h3 v-text="lang && lang['Not Logged in please log in first']"></h3>
          <div class="value">
            <router-link :to="{path: '/user/login', query: {from: $route.name}}" class="btn" v-text="lang && lang['headerLogin']"></router-link>
          </div>
        </div>
      </div>
      <!-- 记录 -->
      <div class="data" v-if="mixUserInfo.userName">
        <div class="menu">
          <span class="item" v-bind:class="{active: menuName==='commission'}" @click="switchMenu('commission')" v-text="lang && lang['Rebate Record']"></span>
          <span class="item" v-bind:class="{active: menuName==='friends'}" @click="switchMenu('friends')" v-text="lang && lang['My Friends']"></span>
        </div>
        <p class="tip" :class="{'hidden': menuName!=='commission'}">{{lang && lang['Rebate Str'].replace('{unit}', unit)}}</p>
        <!-- 佣金记录 -->
        <div class="commission" v-if="menuName==='commission'">
          <div class="well">
            <ul class="list">
              <li class="item">
                <div class="value">
                  <h3 v-text="lang && lang['Total Rebate']"></h3>
                  <h3>{{commissionObj && commissionObj.TotalCommssion | fillDecimal(2)}} {{unit}}</h3>
                </div>
              </li>
              <li class="item">
                <div class="value">
                  <h3 v-text="lang && lang['Level 1 Rebate']"></h3>
                  <h3>{{commissionObj && commissionObj.Commssion1 | fillDecimal(2)}} {{unit}}</h3>
                </div>
              </li>
              <li class="item">
                <div class="value">
                  <h3 v-text="lang && lang['Level 2 Rebate']"></h3>
                  <h3>{{commissionObj && commissionObj.Commssion2 | fillDecimal(2)}} {{unit}}</h3>
                </div>
              </li>
            </ul>
          </div>
          <div class="table">
            <ul class="list">
              <li class="item header">
                <h3 v-text="lang && lang['Friends Name']"></h3>
                <h3 v-text="lang && lang['Rebate Date']"></h3>
                <h3 v-text="lang && lang['status']"></h3>
                <h3 v-text="lang && lang['Reward Rebate']"></h3>
              </li>
              <li class="item"  v-for="(item, index) in commissionObj.Datas" :key="index">
                <span>{{item.CustomerName.substring(0,2)}}****</span>
                <span>{{item.Time | formatDate}}</span>
                <span>{{item.Status === 1 ? lang['Issued'] : (item.Status === 4 ? lang['Failed'] : lang['To be issued'])}}</span>
                <span>{{item.Commssion | fillDecimal(6)}} {{item.CoinCode}}</span>
              </li>
              <li v-if="commissionObj.Datas && commissionObj.Datas.length<=0" class="no-data">
                  {{lang.norecord}}
              </li>
            </ul>
            <SwPaging
            :total="total"
            :pageSize="pageSize"
            :pageRange="pageRange"
            :pageIndex="pageIndex"
            :lang="lang"
            @jumpPage="jumpPage"></SwPaging>
          </div>
        </div>
        <!-- 我的好友 -->
        <div class="friends" v-if="menuName==='friends'">
           <div class="well">
            <ul class="list">
              <li class="item">
                <div class="value">
                  <h3 v-text="lang && lang['Level 1 Friends']"></h3>
                  <h3>{{friendObj && friendObj.FriendCount1 || 0}}{{lang && lang['People']}}</h3>
                </div>
              </li>
              <li class="item">
                <div class="value">
                  <h3 v-text="lang && lang['Level 2 Friends']"></h3>
                  <h3>{{friendObj && friendObj.FriendCount2 || 0}}{{lang &&lang['People']}}</h3>
                </div>
              </li>
            </ul>
          </div>
          <div class="table">
            <ul class="list">
              <li class="item header">
                <h3 v-text="lang && lang['Friends Name']"></h3>
                <h3 v-text="lang && lang['Registration Date']"></h3>
                <h3 v-text="lang && lang['Level']"></h3>
                <h3 v-text="lang && lang['Trading Status']"></h3>
              </li>
              <li class="item" v-for="item in friendObj.Datas" :key="item.RegisterTime">
                <span>{{item.CustomerName.substring(0,2)}}****</span>
                <span>{{item.RegisterTime | formatDate}}</span>
                <span>{{item.Rank === 1 ? lang['Level 1'] : lang['Level 2']}}</span>
                <span>{{item.Status ? lang['Rransactioned'] : lang['Not Rransaction']}}</span>
              </li>
              <li v-if="friendObj.Datas && friendObj.Datas.length<=0" class="no-data">
                  {{lang.norecord}}
              </li>
            </ul>
            <SwPaging
            :total="total"
            :pageSize="pageSize"
            :pageRange="pageRange"
            :pageIndex="pageIndex"
            :lang="lang"
            @jumpPage="jumpPage"></SwPaging>
          </div>
        </div>
      </div>
      <!-- 活动规则 -->
      <div class="rules">
        <h3 v-text="lang && lang['Activity Rules']"></h3>
        <p class="text" v-html="textData && textData.Rule"></p>
      </div>
    </div>
    <!-- 页脚 -->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import commonMixins from '@/mixins/common.js'
import ModalApi from '@/components/SwModal/api.js'
import SwPaging from '@/components/SwPaging/index.vue'
import $ from 'jquery'
import '../../../static/js/jquery.qrcode.min.js'
import Unitl from '@/utils/Utils.js'

export default {
  mixins: [commonMixins],
  data () {
    return {
      menuName: 'commission',
      shareInfo: {},    // 分享信息，二维码，链接，邀请码
      commissionObj: {
        Datas: []
      },   // 佣金记录的信息
      friendObj: {
        Datas: []
      },        // 好友记录的信息
      textData: {
        CopyLinkText: '',
        CopyCodeText: ''
      },
      noList: [],       // 排名数组
      noImgs: [         // 对应排名的图片
        require('./images/sort-num1.png'),
        require('./images/sort-num2.png'),
        require('./images/sort-num3.png')
      ],
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页多少条
      pageRange: 7, // 页码条范围，例如8就是显示1-7的页码条
      total: 0,
      unit: ''      // 货币单位
    }
  },
  computed: {
    ...mapGetters({
      mixUserInfo: 'userInfo'
    })
  },
  created () { },
  components: {
    SwPaging
  },
  methods: {
    switchMenu (name) {
      // 切换
      if (this.menuName !== name) {
        this.total = 0
        this.pageIndex = 1
        this.menuName = name
      }
      if (name === 'commission') {
        this.getCommissionList()
      } else {
        this.getFriend()
      }
    },
    jumpPage (no) {
      if (this.menuName === 'commission') {
        this.getCommissionList(no)
      } else {
        this.getFriend(no)
      }
    },
    // 复制的内容
    copyContent (str) {
      // 没获取到分享数据时，不进入
     
      if (str === 'link') {
        return this.textData.CopyLinkText && this.textData.CopyLinkText.replace('{link}', this.shareInfo.url)
      }
      return this.textData.CopyCodeText && this.textData.CopyCodeText.replace('{code}', this.shareInfo.code)
    },
    // 复制
    copy (id) {
      let dom = document.getElementById(id)
      dom.select()
      document.execCommand('copy')
      ModalApi.message(this.lang['copy success'])
    },

    // 获取页面文言配置
    getText () {
      this.$host3.post('IDCMInvite/GetPagesetting', {
        type: 2,
        host: window.location.hostname === '127.0.0.1' ? 'idcm.io' : window.location.hostname
      }).then((res) => {
        // 获取文本信息
        this.textData = res.data || {}
        if (res.data && res.data.Datas) {
          this.noList = eval(res.data.Datas) || []
        }
        // 有登录，获取分享内容、佣金记录、我的好友
        if (this.mixUserInfo.userId) {
          this.getCommissionList()
        }
      })
    },

    // 获取佣金记录
    getCommissionList (no) {
      this.$host3.post('IDCMInvite/GetCommssionRecord', {
        customerId: this.mixUserInfo.userId,
        ruleId: this.textData.RuleConfigurationID || '',
        pageIndex: no || this.pageIndex,
        pageSize: 10
      }).then((res) => {
          if(!res.data) return
          this.commissionObj = res.data || {}
          this.total = res.data.Page.PageCount || 0
          this.unit = this.commissionObj.CoinCode || ''
      })
    },

    // 获取分享的二维码、链接和邀请码
    getShareInfo () {
      this.$host3.post('IDCMInvite/GetCustomerCode', {
        customerId: this.mixUserInfo.userId
      }).then((res) => {
        this.shareInfo.code = res.data
        this.shareInfo.url = window.location.origin + '/invitation/receive?code=' + res.data + '&lang=' + this.langKey
        this.getQrcode()
      })
    },

    // 生成二维码
     getQrcode() {
      // 判断是否存在一张二维码图片，如果存在则remove
      if ($('#qrcode').find('canvas').length > 0) {
        $('#qrcode').find('canvas').eq(0).remove('canvas')
      }
      $('#qrcode').qrcode({
        render: 'canvas',
        text: this.shareInfo.url,
        width: 90,
        height: 90
      })
    },

    // 获取我的好友
    getFriend (no) {
      this.$host3.post('IDCMInvite/GetFriendCommssionRecord', {
        customerId: this.mixUserInfo.userId,
        ruleId: this.textData.RuleConfigurationID || '',
        pageIndex: no || this.pageIndex,
        pageSize: 10
      }).then((res) => {
          this.friendObj = res.data || {}
          this.total = res.data.Page.PageCount
      })
    }
  },
  mounted () {
    this.getText()
    this.getShareInfo()
  },
  watch: {
    langKey() {
      setTimeout(() => {
        this.getText()
        this.getShareInfo()
      }, 500)
    }
  },
  // 过滤器
  filters: {
    formatDate: function (value) {
      if (!value) return ''
      value = value.replace(/-/g, '/')
      return Unitl.formatDate(new Date(value), 'yyyy-MM-dd')
    }
  }
}
</script>

<style lang="less" scoped>
.invite-main {
  min-width: 780px;
  .banner-small {
    display: none;
  }
  .banner {
    height: 450px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;    

    .title {
      color: white;
      max-width: 1200px;
      width: 90%;
      height: 100%;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;

      h3 {
        font-size: 50px;
        margin-bottom: 50px;
      }

      h4 {
        margin-top: 40px;
        font-size: 30px;
      }
    }
  }

  .content {
    max-width: 1200px;
    padding: 5px 1%;
    box-sizing: border-box;
    margin: 40px auto;

    .sort {
      margin: 40px auto;
      .list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .item {
          width: 310px;
          height: 134px;
          background: url('./images/sort-bg.png') no-repeat left bottom;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;

          img {
            margin-right: 20px;
          }

          .text {
            color: white;
            display: flex;
            flex-direction: column;

            span {
              display: inline-block;
              margin: 7px 0;

              em {
                font-size: 12px;
                font-weight: normal;
              }
            }

            .money {
              font-size: 18px;
              letter-spacing: 1px;     
            }

            .unit {
              font-size: 12px;
              margin-left: 5px;
            }
          }
        }

        .item:last-child {
          margin-right: 0;
        }
      }
    }

    .style {
      width: 100%;
      height: 210px;
      margin: 40px auto;
      background: url('./images/style-bg.png') no-repeat center;
      position: relative;

      .list {
        height: 100%;
        padding: 0 50px 0 160px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .item {

          
          h3 {
            font-size: 14px;
            text-align: left;
            color: white;
            margin: 12px 0;
          }

          .title {
            font-weight: 400;
            font-size: 16px;
          }

          .long {
            max-width: 250px;
          }
          .qrcode {
            width: 90px;
            height: 90px;
          }

          .value {
            margin: 20px 0;
            position: relative;

            input {
              position: fixed;
              top: -1000px;
            }

            .input {
              display: inline-block;
              background-color: white;
              border-radius: 100px;
              padding: 0 15px;
              height: 30px;
              line-height: 30px;
              width: auto;
              overflow: hidden;
              font-size: 12px;
              color: #6f6f6f;
            }

            .code {
              color: #333;
              font-size: 20px;
            }

            .btn {
              background-color: #14141C;
              border-radius: 100px;
              color: white;
              font-size: 12px;
              padding: 7px 20px;
              text-align: center;
              cursor: pointer;
              margin: 10px 0;
            }

            .btn:hover {
              box-shadow: 0 2px 4px 0 rgba(20,20,28,0.50);
            }
          }
        }
      }

      .login {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;

        .value {
          position: relative;

          .btn {
            display: inline-block;
            margin: 20px auto 0;
            background-color: #14141C;
            border-radius: 100px;
            color: white;
            font-size: 14px;
            padding: 10px 30px;
            text-align: center;
          }
        }
      }
    }

    .data {
      background-color: #2A3440;
      border-radius: 10px;
      padding-top: 30px;
      text-align: center;
      position: relative;

      .menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 0 auto;
        border: 1px solid #4a90f7;
        border-radius: 4px;
        height: 30px;
        display: inline-block;

        .item {
          display: inline-block;
          width: 110px;
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          color: white;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
        }

        .item:first-child.active {
          border-radius: 4px 0 0 4px;
          background-image: linear-gradient(225deg, #7FBBFF 0%, #4485E4 100%);
        }

        .item:last-child.active {
          border-radius: 0 4px 4px 0;
          background-image: linear-gradient(-225deg, #7FBBFF 0%, #4485E4 100%);
        }
      }

      .tip {
        margin: 20px auto 0;
        font-size: 12px;
        color: #666666;
      }

      .hidden {
        display: none;
      }

      .well {
        margin: 15px auto;

        .list {
          display: flex;
          flex-direction: row;
          justify-content: center;

          .item {
            width: 245px;
            height: 100px;
            padding: 10px;
            box-sizing: border-box;
            margin-right: 80px;
            background: url('./images/well-bg.png') no-repeat center;
            box-shadow: 0 0 6px 0 rgba(52,52,52,0.20);
            border-radius: 10px;

            .value {
              width: 100%;
              box-sizing: border-box;
              h3 {
                color: white;
                margin: 14px 0;
                text-align: center;
              }
            }
          }

          .item:last-child {
            margin-right: 0;
          }
        }
      }
    }

    .rules {
      margin: 40px auto;
      padding: 20px 0;

      h3 {
        position: relative;
        text-align: center;
        color: white;
        font-size: 18px;
        letter-spacing: 1px;
      }

      h3::before {
        content: "";
        position: absolute;
        left: 0;
        width: 28%;
        top: 50%;
        height: 3px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        background-image: linear-gradient(90deg, rgba(102,133,234,0.00) 0%, #6685EA 100%);
        border-radius: 12px;
        background-size: contain;
      }

      h3::after {
        content: "";
        position: absolute;
        right: 0;
        width: 28%;
        top: 50%;
        height: 3px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        background-image: linear-gradient(-90deg, rgba(102,133,234,0.00) 0%, #6685EA 100%);
        border-radius: 12px;
        background-size: contain;
      }

      .text {
        padding: 40px 0;
        text-align: left;
        word-wrap: all;
        line-height: 20px;
        color: white;
        font-size: 14px;
      }
    }

    .table {
      margin: 0 auto;
      min-height: 160px;

      .no-data {
        font-size: 16px;
        color: #fff;
        margin-top: 5%;
      }
      .list {
        .item {
          display: flex;
          flex-direction: row;
          padding: 10px 10%;

          h3, span {
            display: inline-block;
            color: white;
            text-align: left;
          }

          h3:nth-child(1), span:nth-child(1){
            width: 35%;
          }
          h3:nth-child(2), span:nth-child(2){
            width: 30%;
          }
          h3:nth-child(3), span:nth-child(3){
            width: 15%;
          }
          h3:last-child, span:last-child {
            width: 20%;
            text-align: right;
          }

          span {
            font-size: 14px;
            color: #80919C;
          }
        }

        .header {
          background-color: #19222C;
          padding: 10px 10%;
        }
      }
    }
  }
}


@media screen and (max-width: 1200px){
  .invite-main {
    .banner-small {
      display: block;
    }
    .banner-big {
      display: none;
    }

    .content {
      width: 100%;

      .sort .list {
        padding: 0 10px;
        .item {
          width: 250px;
          height: 110px;
          margin-right: 10px;
          border-radius: 10px;

          .name {
            font-size: 12px;
          }

          .text .money {
            font-size: 13px;
          }
        }
      }

      .style {
        background: url(./images/style-bg-800.png) no-repeat left bottom;
        background-size: 100% 100%;

        .list {
          padding: 0 40px;

          .item .value .link {
            width: 220px;
            height: 46px;
            border-radius: 10px;
            line-height: 20px;
            display: flex;
            align-items: center;
            word-break: break-all;
          }
        }
      }

      .data .well {
        padding: 0 5px;
        .list {
          .item {
            margin-right: 2%;
          }
        }
      }
    }
  }
}
</style>

